<template>
  <div id="app">
    <!-- 测试组件 -->
    <!-- <Syx-Ceshi/> -->
    <!-- 滚动条组件 -->
    <!-- <Syx-Scrollbar :top="false" id="Syx-Scrollbar2">
      <div v-for="v in 99" :key="v" v-text="v" style="width:120%"></div>
    </Syx-Scrollbar> -->

    <!-- 分割线 -->
    <!-- <br/>
    <Syx-Divider type="dashed" contentPosition="left" fontColor="red">999</Syx-Divider>
    <Syx-Divider><svg class="Syx-svg" t="1683356499427" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3268" width="200" height="200">
            <path
              d="M547.84 873.472h-76.8c-67.584 0-122.368-54.784-122.368-122.368v-158.208h-51.2c-36.864 0-69.12-20.992-84.992-54.272-15.36-33.28-10.24-71.68 13.312-99.84l215.04-254.976c17.92-20.992 44.032-33.28 71.68-33.28s53.76 12.288 71.68 33.28l215.04 254.976c23.552 28.16 28.672 66.56 13.312 99.84-15.36 33.28-48.128 54.272-84.992 54.272H670.72v158.208c-0.512 67.584-55.296 122.368-122.88 122.368z"
              p-id="3269" fill="#e8989a"></path>
          </svg></Syx-Divider>
    <Syx-Divider dividerColor="red" contentPosition="right">999</Syx-Divider>

    <div>
    <span>999</span>
    <Syx-Divider :direction="2"></Syx-Divider>
    <span>999</span>
    <Syx-Divider type="dotted" :direction="2"></Syx-Divider>
    <span>999</span>
  </div> -->

    <!-- 布局组件 -->
    <!-- <Syx-Header>Header</Syx-Header>
 <Syx-Footer>Footer</Syx-Footer>
  <Syx-Aside>Aside</Syx-Aside>
<Syx-Main>Main</Syx-Main> 
     <Syx-Container>
      <template>自定义内容</template>
      <template slot="Header">
        Header
      </template>
      <template slot="Footer">
        Header
      </template>
      <template slot="Main">
          <div v-for="v in 99" :key="v" v-text="v"></div>
      </template>
      <template slot="Aside">
          <div v-for="v in 99" :key="v" v-text="v"></div>
      </template>
    </Syx-Container> -->

    <!-- 基础 -->

    <!-- 按钮 -->
    <!-- <div style="padding:20px">

      <Syx-Button disabled>禁用按钮</Syx-Button>
      <Syx-Button @click="Click">默认按钮</Syx-Button>
      <Syx-Button type="primary">主要按钮</Syx-Button>
      <Syx-Button type="success">成功按钮</Syx-Button>
      <Syx-Button type="info">信息按钮</Syx-Button>
      <Syx-Button type="warning">警告按钮</Syx-Button>
      <Syx-Button type="danger" :radius="50">危险按钮</Syx-Button>


      <Syx-Button @click="Click" type="text" :loading="{ show: true, class: 'loading' }">文字按钮</Syx-Button>
      <Syx-Button @click="Click" type="text" disabled :loading="{ show: false, class: 'loading3' }">文字按钮</Syx-Button>
      <Syx-Button @click="Click" type="text" disabled :loading="{ show: true, class: 'loading2' }">文字按钮</Syx-Button>

      <div>

        <Syx-Button type="danger" :radius="180" icon>
          <svg class="Syx-svg" t="1683356499427" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3268" width="200" height="200">
            <path
              d="M547.84 873.472h-76.8c-67.584 0-122.368-54.784-122.368-122.368v-158.208h-51.2c-36.864 0-69.12-20.992-84.992-54.272-15.36-33.28-10.24-71.68 13.312-99.84l215.04-254.976c17.92-20.992 44.032-33.28 71.68-33.28s53.76 12.288 71.68 33.28l215.04 254.976c23.552 28.16 28.672 66.56 13.312 99.84-15.36 33.28-48.128 54.272-84.992 54.272H670.72v158.208c-0.512 67.584-55.296 122.368-122.88 122.368z"
              p-id="3269" fill="#e8989a"></path>
          </svg>
        </Syx-Button>
      </div>
      <div>

        <Syx-Button type="danger" icon :loading="{ show: true, class: 'loading4' }">
          问112
          <svg class="Syx-svg" t="1683356499427" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3268" width="200" height="200">
            <path
              d="M547.84 873.472h-76.8c-67.584 0-122.368-54.784-122.368-122.368v-158.208h-51.2c-36.864 0-69.12-20.992-84.992-54.272-15.36-33.28-10.24-71.68 13.312-99.84l215.04-254.976c17.92-20.992 44.032-33.28 71.68-33.28s53.76 12.288 71.68 33.28l215.04 254.976c23.552 28.16 28.672 66.56 13.312 99.84-15.36 33.28-48.128 54.272-84.992 54.272H670.72v158.208c-0.512 67.584-55.296 122.368-122.88 122.368z"
              p-id="3269" fill="#e8989a"></path>
          </svg>
        </Syx-Button>
      </div>

    </div> -->

    <!-- <div style="padding:20px">
      <Syx-Link disabled>链接</Syx-Link>
      <Syx-Link disabled href="http://www.baidu.com" target="_blank">百度</Syx-Link>
      <Syx-Link href="http://www.baidu.com" target="_blank">百度</Syx-Link>
      <Syx-Link :underline="false">无下划线</Syx-Link>
      <Syx-Link>链接</Syx-Link>
      <Syx-Link type="primary">链接</Syx-Link>
      <Syx-Link type="success">链接</Syx-Link>
      <Syx-Link type="info">链接</Syx-Link>
      <Syx-Link type="warning">链接</Syx-Link>
      <Syx-Link type="danger">链接</Syx-Link>
    </div> -->

    <!-- 预览图片 -->
    <!-- <Syx-Button @click="PreviewImage=true">测试1</Syx-Button>
<Syx-Button @click="PreviewImage1=true">测试2</Syx-Button>
<Syx-PreviewImage v-model="PreviewImage"></Syx-PreviewImage>
<Syx-PreviewImage :type="2" v-model="PreviewImage1" :urls="['http://img5.adesk.com/63833f0a7e978a535f0de4b4?ima','http://img5.adesk.com/63833f0a7e978a535f0de4b6?ima']"></Syx-PreviewImage> -->

    <!-- 图片 -->
    <!-- <Syx-Images></Syx-Images> -->

    <!-- 悬浮提示 -->
    <!-- <div style="margin-top:500px">
<Syx-Title :title="'点击'" content="点击" :mode="2"></Syx-Title>
<div></div>
<Syx-Title :title="'默认效果'"></Syx-Title>
<div></div> 
<Syx-Title :hintShow="true" hint="提示信息提示信息提示信息提示信息提示信息">
  <div>提示信息</div>
</Syx-Title>
<div></div>
<Syx-Title title="标题" :hintShow="true" hint="提示信息提示信息提示信息提示信息提示信息" :firms="{value:true}" @firm="firm">
  <div>取消确认</div>
</Syx-Title>
<div></div>
<Syx-Title fontColor="pink" bgColor="yellow" title="标题" :hintShow="true" hint="提示信息提示信息提示信息提示信息提示信息" :firms="{value:true}" @firm="firm">
  <div>自定义颜色</div>
</Syx-Title>

</div> -->

    <!-- 折叠 -->
    <!-- <Syx-Fold v-model="fold" @change="foldf">
      <div>
        <Syx-FoldItem name="1">
        <div style="" slot="title">阿斯顿黄静案所包含的八十多</div>
        <div style="">阿斯顿黄静案所包含的八十多</div>
      </Syx-FoldItem>
      </div>
      <Syx-FoldItem name="2"></Syx-FoldItem>
    </Syx-Fold> -->

    <!-- 弹出窗 -->
    <!-- <Syx-Popout :visible.sync="vs" @cancel="cancel" @affirm="firm"><div>1232</div></Syx-Popout> -->
    <!-- 轮播图 -->
    <!-- <Syx-Slideshow style="width:400px;height:600px" :mode="1"></Syx-Slideshow> -->

    <!-- <Syx-Button @click="vs=true">123</Syx-Button> -->

    <!-- 验证码 -->
    <!-- <Syx-SecurityCode v-model="code"></Syx-SecurityCode> -->

    <!-- 表格 -->

    <!-- <div style="padding: 20px; box-sizing: border-box; flex: 1; height: 0">
      <Syx-Table
        :TableSun.sync="dd"
      >
        <div slot="cztop">操作自定义</div>
        <div slot="nametop">名称自定义</div>
        <template v-slot:namebottom="{ data }">{{ data.name }}自定义</template>
        <template v-slot:cz="{ data }">
          <Syx-Button type="text" @click="Click1(data)">按钮</Syx-Button>
        </template>
      </Syx-Table>
    </div> -->
    <!-- <div style="height: 200px"></div> -->
    <!-- 实时时间 -->
    <!-- <Syx-RealTime></Syx-RealTime>
    <Syx-RealTime>
      <template v-slot:default="{data}">
        {{data}} 123
      </template>
    </Syx-RealTime> -->
    <!-- 分页 -->
    <Syx-Paging
    ></Syx-Paging>
    <!-- 树形 -->

    <!-- <Syx-Checkbox v-model="hobby">
      <Syx-CheckboxItem label="抽烟"> </Syx-CheckboxItem>
      <Syx-CheckboxItem label="喝酒"> </Syx-CheckboxItem>
      <Syx-CheckboxItem label="烫头"> </Syx-CheckboxItem>
    </Syx-Checkbox>  -->

    <!-- <div style="width:400px;height:600px">
      <Syx-TreeChart 
    :json='{
        name: "root",
        image_url: "https://static.refined-x.com/static/avatar.jpg",
        class: ["rootNode"],
        children: [
          {
            name: "children1",
            image_url: "https://static.refined-x.com/static/avatar.jpg",
          },
          {
            name: "children2",
            image_url: "https://static.refined-x.com/static/avatar.jpg",
            mate: [
              {
                name: "mate",
                image_url: "https://static.refined-x.com/static/avatar.jpg",
              },
            ],
            children: [
              {
                name: "grandchild",
                image_url: "https://static.refined-x.com/static/avatar.jpg",
              },
              {
                name: "grandchild2",
                image_url: "https://static.refined-x.com/static/avatar.jpg",
              },
              {
                name: "grandchild3",
                image_url: "https://static.refined-x.com/static/avatar.jpg",
              },
            ],
          },
        ],
      }'
     :class="{landscape: 0}" @click-node="clickNode"
    ></Syx-TreeChart> 
    </div> -->

    <!-- <Syx-Radio  :dataSouce='[
              {
                  label:1,
                  value:"单选框1",
              },
              {
                  label:2,
                  value:"单选框2",
              },
              {
                  label:3,
                  value:"单选框3",
              },
              {
                  label:4,
                  value:"单选框4",
              }
          ]' v-model="ddd" />  -->

    <!-- <Syx-Input v-model="aaaaa"></Syx-Input> -->
    <!-- <Syx-InputNum v-model="paging.total"></Syx-InputNum> -->

    <!-- <Syx-Select v-model="ddd">
      <Syx-SelectOption
        v-for="item in showlist"
        :key="item.item_id"
        :label="item.item_name"
        :optionid="item.item_id"
      ></Syx-SelectOption>
    </Syx-Select> -->

    <!-- <Syx-Switch v-model="checked"></Syx-Switch> -->
    <!-- <Syx-ColorPicker v-model="color"></Syx-ColorPicker> -->
    <!-- <Syx-Transfer
    :data="transferData"
          @on-change="handleTransferChange"
          :check-data="valueList"
          @left-check-change="leftCheckChange"
          @right-check-change="rightCheckChange"
          filterable ></Syx-Transfer> -->

    <!-- <Syx-Rate v-model="curScore" @starChange="onStarChange" /> -->
    <!-- <Syx-VerifyImg
      ref="slideblock"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :imgs="imgs"
      :showC.sync="ssss"
    ></Syx-VerifyImg>

    <Syx-Button @click="ssss=true">测试</Syx-Button> -->

    <!-- <Syx-Cascader
      :dataSource="dataSource"
      @change="getList"
      avaSearch
      clearable
      disabled
      :showAll="true"
    ></Syx-Cascader>
    <div>123</div> -->

    <!-- <div style="margin: 20px">
      <Syx-DateTime v-model="a" type="time"></Syx-DateTime>
      <Syx-DateTime v-model="b" type="date"></Syx-DateTime>
    </div> -->
    <!-- <div style="margin: 20px">
      <Syx-Upload></Syx-Upload>
    </div> -->

    <!-- <Syx-Form ref="forss" :form.sync="formQu" :rules="rulesQu">
      <Syx-FormItem prop="inp" label="输入">
        <Syx-Input v-model="formQu.inp"></Syx-Input>
      </Syx-FormItem>
      <Syx-FormItem prop="datetimes" label="时间"
        ><Syx-DateTime v-model="formQu.datetimes"></Syx-DateTime>
      </Syx-FormItem>
      <Syx-FormItem prop="datetimes1" label="时间1"
        ><Syx-DateTime v-model="formQu.datetimes1"></Syx-DateTime>
      </Syx-FormItem>
      <Syx-FormItem prop="datetimes11" label="时间11"
        ><Syx-DateTime
          v-model="formQu.datetimes11"
        ></Syx-DateTime> </Syx-FormItem
    ></Syx-Form>
    <Syx-Button @click="aaa">提交</Syx-Button>
    <Syx-Button @click="bbbb">重置</Syx-Button> -->

    <!-- <Syx-Tag>默认</Syx-Tag> 
<Syx-Tag type="success">成功</Syx-Tag> 
<Syx-Tag type="info">信息</Syx-Tag> 
<Syx-Tag type="warning">警告</Syx-Tag> 
<Syx-Tag type="danger">危险</Syx-Tag>  -->

    <!-- <Syx-Tab v-model="aaaaddd"></Syx-Tab> -->
    <!-- <div style="margin:20px">
<Syx-Dropdown></Syx-Dropdown><div>123</div> 
  </div> -->
    <!-- <Syx-Wl></Syx-Wl> -->
    <!-- <div style="width:240px;height:600px">
      <Syx-MenuSun></Syx-MenuSun>
    </div> -->

    <!-- <div style="width: 400px; height: 400px">
      <Syx-TableSun @checkhq="checkhq"></Syx-TableSun>
    </div> -->

    <!-- <Syx-SelectSun v-model="ses"></Syx-SelectSun> -->
    <!-- 
<Syx-Bd style="overflow:auto;height:650px;width:100%"></Syx-Bd>
  未完成 -->

    <div>1999</div>
<!-- <Syx-TreeSun></Syx-TreeSun> -->
<!-- <Syx-CasSun v-model="cassun"></Syx-CasSun> -->
    <!-- <Syx-Quill style="width:100%;height:400px" :contents.sync="objcontent"></Syx-Quill> -->
    <!-- <Syx-Md style="width:100%;height:400px" :content.sync="objcontent"></Syx-Md> -->
    <!-- <Syx-DateTime v-model="formQu.datetimes1"></Syx-DateTime> -->
    <div>1999</div>

    <!-- <Syx-Home></Syx-Home> -->
    <!-- <Syx-Screenfull /> -->
    <!-- <Syx-Login :imgs="imgs"></Syx-Login> -->

    <!-- <Syx-CountTime v-if="time" @sj="sjjjj"></Syx-CountTime>
<Syx-Button @click="time=false">销毁</Syx-Button> -->
  </div>
</template>

<script>
import img0 from "./img/img.jpg";
import img1 from "./img/img1.jpg";
import img2 from "./img/img2.jpg";
import img3 from "./img/img3.jpg";
import img4 from "./img/img4.jpg";
import img5 from "./img/img5.jpg";

let aaaaddd = (rule, value, callback) => {
  return callback(value ? "" : "999");
};
export default {
  name: "App",
  created() {
    // console.log(this);
    // console.log(this.sortOne([9, 12, 3, 5, 7, 8]));
    this.$nextTick(() => {
      // this.NotifyMessage({content:'999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999'})
      // this.NotifyMessage({content:'91'})
      //  let a =  this.Loading({notifyFlag:true})
      //   setTimeout(() => {
      //     a.cancel()
      //   }, 3000);
 
    });
  },
  data() {
    return {
      cassun:[1],
      objcontent: "# 9999",
      ses: [1,2],
      time: true,
      aaaaddd: "Tab1",
      rulesQu: {
        datetimes: { required: true, msg: "请选择", verifyai: aaaaddd },
        datetimes1: {},
        datetimes11: {},
        inp: {},
      },
      formQu: {
        datetimes: "",
        datetimes1: "",
        datetimes11: "",
        inp: "",
      },
      dataSource: [
        {
          value: "shejiyuanze",
          label: "设计原则",
          children: [
            {
              value: "yizhi",
              label: "一致",
              children: [
                {
                  value: "tiqiu",
                  label: "踢球",
                },
                {
                  value: "shuijiao",
                  label: "睡觉",
                },
              ],
            },
            {
              value: "tuanjie",
              label: "团结",
              children: [
                {
                  value: "chifan",
                  label: "吃饭",
                },
              ],
            },
          ],
        },
        {
          value: "kaoshiguize",
          label: "考试规则",
          children: [
            {
              value: "anjing",
              label: "安静",
              children: [
                {
                  value: "zuobi",
                  label: "作弊",
                },
                {
                  value: "jiaojuan",
                  label: "交卷",
                },
              ],
            },
            {
              value: "lianhe",
              label: "联合",
              children: [
                {
                  value: "shuxue",
                  label: "数学",
                },
              ],
            },
          ],
        },
      ],
      checked: false,
      ssss: false,
      showlist: [
        {
          item_name: "选项1",
          item_id: "1",
        },
        {
          item_name: "选项2",
          item_id: "2",
        },
        {
          item_name: "选项3",
          item_id: "3",
        },
        {
          item_name: "4",
          item_id: "4",
        },
      ],
      dd: [
        {
          date: "2016-05-02",
          name: "小王",
          address: "上海市",
        },
        {
          date: "2016-05-04",
          name: "大王",
          address: "上海市上海市上海市上海市上海市上海市上海市上海市",
        },
        {
          date: "2016-05-01",
          name: "小孙",
          address: "上海市静安区",
        },
        {
          date: "2016-05-03",
          name: "小雪",
          address: "上海市静安区",
        },
      ],
      imgs: [img0, img1, img2, img3, img4, img5],
      transferData: [
        {
          key: 0,
          label: "备选项0",
          disabled: false,
        },
        {
          key: 1,
          label: "备选项1",
          disabled: false,
        },
        {
          key: 2,
          label: "备选项2",
          disabled: false,
        },
        {
          key: 3,
          label: "备选项3",
          disabled: true,
        },
        {
          key: 4,
          label: "备选项4",
          disabled: true,
        },
        {
          key: 5,
          label: "备选项5",
          disabled: false,
        },
        {
          key: 6,
          label: "备选项6",
          disabled: true,
        },
        {
          key: 7,
          label: "备选项7",
          disabled: true,
        },
        {
          key: 8,
          label: "备选项8",
          disabled: false,
        },
        {
          key: 9,
          label: "备选项9",
          disabled: false,
        },
        {
          key: 10,
          label: "备选项10",
          disabled: false,
        },
        {
          key: 11,
          label: "备选项11",
          disabled: false,
        },
        {
          key: 12,
          label: "备选项12",
          disabled: false,
        },
        {
          key: 13,
          label: "备选项13",
          disabled: false,
        },
        {
          key: 14,
          label: "备选项14",
          disabled: false,
        },
        {
          key: 15,
          label: "备选项15",
          disabled: false,
        },
      ],
      //初始右侧选中数据key集合
      valueList: [1, 2, 5, 6],
      ddd: "1",
      PreviewImage: false,
      PreviewImage1: false,
      hobby: ["抽烟", "喝酒", "烫头"],
      fold: ["1"],
      vs: false,
      code: "",
      aaaaa: "",
      paging: {
        total: 100,
        currentPage: 1,
        pagerCount: 10,
      },
      color: "red",
      curScore: 1,
      a: "",
      b: "",
      c: "",
    };
  },
  updated() {
    // console.log(this.cassun);
  },
  methods: {
    sjjjj(d) {
      console.log(d);
    },
    checkhq(v) {
      console.log(v);
    },
    sss() {
      console.log("123");
    },
    aaa() {
      if (this.$refs.forss.verify()) {
        console.log("成功");
      } else {
        console.log("失败");
      }
    },
    bbbb() {
      this.$refs.forss.reset();
    },
    getList(data) {
      console.log(data);
    },
    onSuccess(time) {
      console.log("验证通过，耗时" + time + "毫秒");
      this.ssss = false;
      setTimeout(() => {
        this.$refs.slideblock.reset();
      }, 500);
    },
    onFail() {
      console.log("验证不通过");
    },
    onRefresh() {
      console.log("点击了刷新小图标");
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
      this.$refs.slideblock.reset();
    },

    onStarChange(e) {
      console.log(e);
    },
    // 穿梭框变化
    handleTransferChange(list) {
      console.log("change", list);
    },
    // 左边选中变化
    leftCheckChange(checkData) {
      console.log("left", checkData);
    },
    // 右边选中变化
    rightCheckChange(checkData) {
      console.log("right", checkData);
    },
    foldf(val) {
      console.log("v-model", this.fold);
      console.log("改变", val);
    },
    Click1(val) {
      console.log(val);
    },
    cc() {
      console.log(this.c);
    },
    cancel() {
      console.log("取消");
    },
    firm() {
      console.log("确认");
    },
    // 分页操作
    prevClick(page) {
      console.log("上一页", page);
      this.paging.currentPage = page;
    },
    nextClick(page) {
      console.log("下一页", page);
      this.paging.currentPage = page;
    },
    pageClick(page) {
      console.log("分页点击", page);
      this.paging.currentPage = page;
    },
    pageJumpe(page) {
      console.log("跳转", page);
      this.paging.currentPage = page;
    },
    prevQuickClick(page) {
      console.log("快速向前切换", page);
      this.paging.currentPage = page;
    },
    nextQuickClick(page) {
      console.log("快速向后切换", page);
      this.paging.currentPage = page;
    },
    currentChange(page, old) {
      console.log("分页切换", page, "切换前分页", old);
      this.paging.currentPage = page;
    },
    clickNode(val) {
      console.log(val);
    },
  },
};
</script>

<style>
html,
body,
#app {
  width: 100vw;
  height: 100vh !important;
  margin: 0 auto;
  padding: 0;
}
</style>
